<template>
  <div class="component-group" :style="customStyle">
    <!-- 遍历 components 数组，动态渲染组件 -->
    <component
      v-for="(componentConfig, index) in showComponents"
      :key="index"
      :is="componentConfig.name"
      v-bind="componentConfig.props"
    >
      <!-- 动态插槽绑定 -->

      <template v-for="(slotContent, slotName) in componentConfig.slots" v-slot:[slotName]>
        <component :is="slotContent.name" v-bind="slotContent.props" />
      </template>
    </component>
  </div>
</template>

<script setup>
import { defineProps, computed, onMounted } from 'vue'

const props = defineProps({
  components: {
    type: Array,
    default() {
      return []
    }
  },
  customStyle: {
    type: Object,
    default() {
      return {}
    }
  }
})

const customStyle = computed(() => {
  return {
    ...props.customStyle
  }
})

const showComponents = computed(() => {
  return props.components.filter((item) => {
    return item.show === true
  })
})

onMounted(() => {
  console.log(props, 123)
})
</script>

<style scoped>
.component-group {
  display: flex;
  flex-wrap: wrap;
}
</style>
